<div class="py-5 sticky top-0 bg-amber-50 dark:bg-gray-900 md:bg-transparent dark:md:bg-transparent border-opacity-15 z-10" :class="{'bg-white dark:bg-gray-800': isOpen}"
     x-data="{isOpen: false}"
     x-init="
        window.addEventListener('resize', () => {
            if (window.matchMedia('(min-width: 640px)').matches) {
                isOpen = false;
            }
        });
     "
>
    <div class="px-5 max-w-8xl mx-auto flex items-center justify-between">
        <div class="flex item-center items-center">

            <!-- Mobile menu button-->
            <button @click="isOpen = !isOpen"
                    type="button"
                    class="sm:hidden relative inline-flex items-center justify-center rounded-md pr-3 text-gray-400 focus:outline-none focus:ring-0"
                    aria-controls="mobile-menu" aria-expanded="false">
                <span class="absolute -inset-0.5"></span>
                <span class="sr-only">Open main menu</span>
                <!--
                  Icon when menu is closed.

                  Menu open: "hidden", Menu closed: "block"
                -->
                <svg x-show="!isOpen" class="h-7 w-7 " fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor"
                     aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round"
                          d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"/>
                </svg>
                <!--
                  Icon when menu is open.

                  Menu open: "block", Menu closed: "hidden"
                -->
                <svg x-show="isOpen" class="h-7 w-7 " fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor"
                     aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>

            <a href="/" class="flex item-center items-center space-x-1.5">
                <div class="flex items-center space-x-1">
                    <c-icons.logo class="size-8 text-teal-600" />
                    <span class="font-bold text-2xl ml-1.5 text-[#1a384a] dark:text-gray-100">cotton</span>
                    <div class=" text-gray-700 dark:text-white text-sm opacity-50 mt-0.5 px-1">for</div>
                    <c-icons.django class=" h-[1.4rem] text-teal-600 mt-1.5" />
                </div>
            </a>
        </div>

        <div class="flex items-center space-x-2">
            <a href="#" @click.prevent="toggleDark" x-data="{
                    'dark': false,
                    init() {
                        this.dark = document.documentElement.classList.contains('dark')

                    },
                    toggleDark() {
                        this.dark = !this.dark
                        document.documentElement.classList.toggle('dark')

                        // Whenever the user explicitly chooses light mode
                        localStorage.theme = this.dark ? 'dark' : 'light'
                    }
                }">
                <c-icons.sun class="size-7 text-yellow-900/40 dark:text-gray-100/50" />
            </a>
            <a href="https://github.com/wrabit/django-cotton" target="_blank" class="text-yellow-900/40 dark:text-gray-100/50 flex items-center space-x-2">
                <c-icons.github class="size-6" />
            </a>
            <a href="https://discord.gg/4x8ntQwHMe" target="_blank" class="text-yellow-900/40 dark:text-gray-100/50 flex items-center space-x-2">
                <c-icons.discord class="size-7" />
            </a>
        </div>
    </div>

    <div x-show="isOpen"
         x-cloak
         x-transition:enter="transition ease-out duration-100"
         x-transition:enter-start="transform -translate-y-4"
         x-transition:enter-end="transform translate-y-0"
         x-transition:leave="transition ease-in duration-100"
         x-transition:leave-start="transform translate-y-0"
         x-transition:leave-end="transform -translate-y-4"
         @click.away="isOpen = false" class="absolute shadow-md bg-white dark:bg-gray-800 top-[67px] inset-x-0 px-5 transition transform origin-top-right md:hidden">
        <c-sidebar />
    </div>
</div>
